<template>
    <div class="add">
        <el-card>
            <div slot="header">
                <el-button style="padding: 0; font-size: 16px;" icon="el-icon-edit" type="text">可以开始制定计划啦～</el-button>
            </div>
            <div>
                <div class="input-radio">
                    <el-input
                        placeholder="请输入计划标题"
                        clearable
                        maxlength="25"
                        show-word-limit
                        v-model="title">
                        <i slot="prefix" class="el-input__icon el-icon-edit-outline"></i>
                    </el-input>
                    <el-radio-group v-model="radio" size="small">
                        <el-radio-button label="今日计划"></el-radio-button>
                        <el-radio-button label="明日计划"></el-radio-button>
                    </el-radio-group>
                </div>
                <el-divider></el-divider>
                <el-input
                    placeholder="请输入计划内容"
                    clearable
                    :autosize="{ minRows: 10, maxRows: 20 }"
                    type="textarea"
                    maxlength="500"
                    resize="none"
                    show-word-limit
                    v-model="content">
                </el-input>
                <el-divider></el-divider>
                <div style="text-align: right;">
                    <el-button type="success" size="medium" icon="el-icon-check" plain @click="addNewPlan">确认定制</el-button>
                    <el-button type="info" size="medium" icon="el-icon-d-arrow-left" plain @click="$router.push('home')">返回首页</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import moment from 'moment'
import {mapState} from 'vuex'
export default {
    data() {
        return {
            title: '',
            content: '',
            radio: '明日计划'
        }
    },
    computed: {
        ...mapState({
            todayPlan: 'todayPlan'
        })
    },
    mounted() {
        if (this.$route.query.notEmpty === '1') {
            this.title = this.todayPlan.title
            this.content = this.todayPlan.content
        }
    },
    filters: {
        dateFilter(data){
            return data.replace(/-/g, '/')
        }
    },
    methods: {
        addNewPlan(){
            if (this.title === '' || this.content === '') {
                return this.$message.error('骚凹瑞～标题或内容不能为空！')
            }
            this.$http({
                url: 'phpbin/tomorrowplan/addPlan.php',
                method: 'get',
                params: {
                    title: this.title,
                    content: this.content,
                    date: this.radio === '明日计划' ? moment().add(1, 'days').format('YYYY-MM-DD') : moment().format('YYYY-MM-DD')
                }
            }).then(res => {
                this.$message.success('计划制定成功！')
                this.$router.replace('/home')
            })
        }
    },
}
</script>

<style lang="less" scoped>
.add{
    padding: 50px 100px;
    .input-radio{
        display: flex;
        align-items: center;
        .el-input{
            flex: 1;
            margin-right: 160px;
        }
    }
}
</style>